<!--
  省市县三级联动选择 （国标）

  @author will
  @site https://pt.jdyd.xyz
  @date 2022/01/17 19:34
-->

<template>
  <a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
</template>
<script lang="ts" setup>
import { defineProps } from 'vue'
import allList from './areacodeSh.json'

const props = defineProps({
    value: { type: Array, default: null },
})

// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['update:value', 'change'])

// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。 
function changeFunc(value, selectedOptions){
    emit('change', selectedOptions, value)
    emit('update:value', value)
}


    // 递归遍历树状结构数据
  function  recursionTreeData (treeData, func, pid) {
      for (let i = 0; i < treeData.length; i++) {

        const item = treeData[i]

        if(func(item)){
          return [item, pid]
        }

        if (item.children && item.children.length > 0) {
           let res = recursionTreeData(item.children, func, item.value)
           if(res){
             return res
           }
        }
      }
    }

// 根据最后一位的（县级编码 搜索展开全部内容 ）
function changeByAreacode(areacode){

  if(!areacode){
    return 
  }

  let p3 : any = recursionTreeData(allList, (r => r.value == areacode), 0)
  if(!p3){
      return false
  }

  let p2: any  = recursionTreeData(allList, (r => r.value == p3[1]), 0)
  if(!p2){
      return false
  }

  let p1 : any = recursionTreeData(allList, (r => r.value == p2[1]), 0)
  if(!p1){
      return false
  }

  changeFunc([p1[0].value, p2[0].value, p3[0].value], [p1[0], p2[0], p3[0]])
  
}

  defineExpose({changeByAreacode})

</script>

